<button nz-button nzType="primary" (click)="showNew(undefined)">新增</button>
<button
  nz-button
  nzType="primary"
  nzDanger
  (click)="delLevels()"
  [disabled]="treeService.checklistSelection.selected.length === 0"
>
  删除
</button>
<!-- <button nz-button nzType="primary" (click)="showSetPermissionModal()">
  模型权限
</button> -->

<nz-divider nzOrientation="left" nzText=""></nz-divider>

<div nz-row>
  <div nz-col [nzSpan]="18" [nzPush]="6" class="content-scroll">
    <nz-card
      nzTitle="基本信息"
      nzSize="small"
      [nzExtra]="extraTemplate"
      class="card"
    >
      <div nz-row>
        <div nz-col nzSpan="8">名称：{{ selectedGroup.name }}</div>
        <div nz-col nzSpan="8">代码：{{ selectedGroup.code }}</div>
        <div nz-col nzSpan="12">创建者：{{ selectedGroup.createdBy }}</div>
        <div nz-col nzSpan="12">创建时间：{{ selectedGroup.createdDate }}</div>
        <div nz-col nzSpan="12">更新者：{{ selectedGroup.modifiedBy }}</div>
        <div nz-col nzSpan="12">
          更新时间：{{ selectedGroup.modifiedDate }}
        </div>

      </div>
    </nz-card>
    <ng-template #extraTemplate>
      <ng-container
        *ngIf="this.treeService.selectListSelection.selected.length > 0"
      >
        <a nz-tooltip nzTooltipTitle="编辑" (click)="showNew(selectedGroup)"
          ><i nz-icon nzType="edit" nzTheme="outline"></i
        ></a>
      </ng-container>
    </ng-template>

    <nz-card
      nzTitle="员工成员"
      nzSize="small"
      [nzExtra]="employeeTemplate"
      class="card"
    >
      <nz-tag
        nzMode="closeable"
        (nzOnClose)="onEmployeeRemove(employee.id)"
        [nzColor]="'blue'"
        *ngFor="let employee of selectedGroup.employees"
      >
        {{ employee.name }}
      </nz-tag>
    </nz-card>
    <ng-template #employeeTemplate>
      <a
        nz-tooltip
        nzTooltipTitle="添加员工成员"
        (click)="isVisibleForAddEmployee = true"
        ><i nz-icon nzType="edit" nzTheme="outline"></i
      ></a>
    </ng-template>

    <nz-card
      nzTitle="群组成员（子组）"
      nzSize="small"
      [nzExtra]="subGroupTemplate"
      class="card"
    >
      <nz-tag
        nzMode="closeable"
        (nzOnClose)="onGroupRemove(group.id)"
        [nzColor]="'blue'"
        *ngFor="let group of selectedGroup.groups"
      >
        {{ group.name }}
      </nz-tag>
    </nz-card>
    <ng-template #subGroupTemplate>
      <a
        nz-tooltip
        nzTooltipTitle="添加子组成员"
        (click)="showAddGroup(selectedGroup)"
        ><i nz-icon nzType="edit" nzTheme="outline"></i
      ></a>
    </ng-template>

    <nz-card
      nzTitle="组织成员"
      nzSize="small"
      [nzExtra]="organizationTemplate"
      class="card"
    >
      <nz-tag
        nzMode="closeable"
        (nzOnClose)="onOrgRemove(org.id)"
        [nzColor]="'blue'"
        *ngFor="let org of selectedGroup.orgs"
      >
        {{ org.name }}
      </nz-tag>
    </nz-card>
    <ng-template #organizationTemplate>
      <a
        nz-tooltip
        nzTooltipTitle="添加组织成员"
        (click)="isVisibleForAddOrganization = true"
        ><i nz-icon nzType="edit" nzTheme="outline"></i
      ></a>
    </ng-template>

    <nz-card
      nzTitle="岗位成员"
      nzSize="small"
      [nzExtra]="roleTemplate"
      class="card"
    >
      <nz-tag
        nzMode="closeable"
        (nzOnClose)="onRoleRemove(role.id)"
        [nzColor]="'blue'"
        *ngFor="let role of selectedGroup.roles"
      >
        {{ role.name }}
      </nz-tag>
    </nz-card>
    <ng-template #roleTemplate>
      <a
        nz-tooltip
        nzTooltipTitle="添加岗位成员"
        (click)="isVisibleForAddRole = true"
        ><i nz-icon nzType="edit" nzTheme="outline"></i
      ></a>
    </ng-template>

    <nz-card
      nzTitle="职级成员"
      nzSize="small"
      [nzExtra]="levelTemplate"
      class="card"
    >
      <nz-tag
        nzMode="closeable"
        (nzOnClose)="onLevelRemove(group.id)"
        [nzColor]="'blue'"
        *ngFor="let group of selectedGroup.levels"
      >
        {{ group.name }}
      </nz-tag>
    </nz-card>
    <ng-template #levelTemplate>
      <a
        nz-tooltip
        nzTooltipTitle="添加职级成员"
        (click)="isVisibleForAddLevel = true"
        ><i nz-icon nzType="edit" nzTheme="outline"></i
      ></a>
    </ng-template>
  </div>
  <div nz-col [nzSpan]="6" [nzPull]="18">
    <nz-tree-view
      [nzTreeControl]="treeService.treeControl"
      [nzDataSource]="dataSource"
    >
      <nz-tree-node *nzTreeNodeDef="let node" nzTreeNodeIndentLine>
        <nz-tree-node-checkbox
          [nzDisabled]="node.expandable || node.type === 'ORG'"
          [nzChecked]="treeService.checklistSelection.isSelected(node)"
          (nzClick)="treeService.leafItemSelectionToggle(node)"
        >
        </nz-tree-node-checkbox>
        <nz-tree-node-option
          [nzDisabled]="node.type === 'ORG'"
          [nzSelected]="treeService.selectListSelection.isSelected(node)"
          (nzClick)="onItemSelect(node)"
        >
          {{ node.label }}
        </nz-tree-node-option>
      </nz-tree-node>

      <nz-tree-node *nzTreeNodeDef="let node; when: hasChild" nzTreeNodePadding>
        <nz-tree-node-toggle *ngIf="!node.loading">
          <i nz-icon nzType="caret-down" nzTreeNodeToggleRotateIcon></i>
        </nz-tree-node-toggle>
        <nz-tree-node-toggle *ngIf="node.loading" nzTreeNodeNoopToggle>
          <i nz-icon nzType="loading" nzTreeNodeToggleActiveIcon></i>
        </nz-tree-node-toggle>
        <nz-tree-node-checkbox
          [nzDisabled]="node.expandable || node.type === 'ORG'"
          [nzChecked]="treeService.descendantsAllSelected(node)"
          [nzIndeterminate]="treeService.descendantsPartiallySelected(node)"
          (nzClick)="treeService.itemSelectionToggle(node)"
        ></nz-tree-node-checkbox>
        <!-- {{ node.label }} -->
        <nz-tree-node-option
          [nzDisabled]="node.type === 'ORG'"
          [nzSelected]="treeService.selectListSelection.isSelected(node)"
          (nzClick)="onItemSelect(node)"
        >
          {{ node.label }}
        </nz-tree-node-option>
      </nz-tree-node>
    </nz-tree-view>
  </div>
</div>

<nz-modal
  [(nzVisible)]="isNewVisible"
  nzTitle="新增"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="submitForm()"
>
  <nz-content *nzModalContent>
    <form nz-form nzLayout="vertical" [formGroup]="validateForm">
      <nz-form-item>
        <nz-form-label>名称</nz-form-label>
        <nz-form-control nzErrorTip="">
          <input nz-input formControlName="name" placeholder="请输入名称" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label>代码</nz-form-label>
        <nz-form-control nzErrorTip="">
          <input nz-input formControlName="code" placeholder="请输入代码" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="!validateForm.controls['id']">
        <nz-form-label>请选择所属组织：</nz-form-label>
        <app-organization-search></app-organization-search>
      </nz-form-item>
    </form>
  </nz-content>
</nz-modal>

<nz-modal
  [(nzVisible)]="isVisibleForAddEmployee"
  nzTitle="添加员工成员"
  (nzOnCancel)="this.isVisibleForAddEmployee = false"
  (nzOnOk)="saveEmployees()"
>
  <nz-content *nzModalContent>
    <app-employee-search></app-employee-search>
  </nz-content>
</nz-modal>

<nz-modal
  [(nzVisible)]="isVisibleForAddGroup"
  nzTitle="添加子组成员"
  (nzOnCancel)="this.isVisibleForAddGroup = false"
  (nzOnOk)="saveGroups()"
>
  <nz-content *nzModalContent>
    <app-group-search></app-group-search>
  </nz-content>
</nz-modal>

<nz-modal
  [(nzVisible)]="isVisibleForAddOrganization"
  nzTitle="添加组织成员"
  (nzOnCancel)="isVisibleForAddOrganization = false"
  (nzOnOk)="saveOrgs()"
>
  <nz-content *nzModalContent>
    <app-organization-search></app-organization-search>
  </nz-content>
</nz-modal>

<nz-modal
  [(nzVisible)]="isVisibleForAddRole"
  nzTitle="添加岗位成员"
  (nzOnCancel)="isVisibleForAddRole = false"
  (nzOnOk)="saveRoles()"
>
  <nz-content *nzModalContent>
    <app-role-search></app-role-search>
  </nz-content>
</nz-modal>

<nz-modal
  [(nzVisible)]="isVisibleForAddLevel"
  nzTitle="添加职级成员"
  (nzOnCancel)="isVisibleForAddLevel = false"
  (nzOnOk)="saveLevels()"
>
  <nz-content *nzModalContent>
    <app-level-search></app-level-search>
  </nz-content>
</nz-modal>

<!-- <nz-modal
  [nzFooter]="null"
  [(nzVisible)]="isRoleReportTree"
  nzTitle="职级汇报线"
  (nzOnCancel)="handleCancel()"
>
  <nz-content *nzModalContent>
    <app-level-tree></app-level-tree>
  </nz-content>
</nz-modal> -->

<!-- <nz-modal
  [(nzVisible)]="isVisibleForSetPermission"
  nzTitle="设置模型权限"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="saveModelPermission()"
>
  <nz-content *nzModalContent>
    <app-set-model-permission></app-set-model-permission>
  </nz-content>
</nz-modal>

<nz-modal
  [(nzVisible)]="isVisibleForSetDataPermission"
  nzTitle="设置数据权限"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="saveDataPermission()"
>
  <nz-content *nzModalContent>
    <app-set-data-permission></app-set-data-permission>
  </nz-content>
</nz-modal> -->
